<!-- @format -->

<template>
  <!-- 头部区域 -->
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      v-model.trim="title"
      @keydown.enter="notify" />
  </header>
</template>

<script>
  export default {
    data() {
      return {
        title: ''
      }
    },
    methods: {
      // 通知父组件
      notify() {
        // 非空校验
        if (!this.title) return
        // 触发自定义事件，并携带数据给老爹
        this.$emit('add-todo', this.title)
        // 清空值
        this.title = ''
      }
    }
  }
</script>

<style></style>
